<template>
  <main class="editor shadow">
    <div id="editor"></div>
    <section class="actions">
      <a-button type="primary" @click="showModal">
        <PushpinOutlined />
        {{ submitButtonMessage }}
      </a-button>
    </section>
    <b-modal ref="modal" @submit="submit" />
  </main>
</template>

<script>
import { onMounted, ref } from "@vue/runtime-core";
import { PushpinOutlined } from "@ant-design/icons-vue";
import { useEditor } from "@u/editor.js";
import { useLocalStorage } from "@u/local-storage.js";
import { useDebouce } from "@u/common";
import BModal from "@b/modal.vue";
import http, { lazyRequest } from "@u/http.js";
import { useErrorNotice, useInfoNotice, useSuccessNotice } from "@u/notice";
import { useRouteQuery } from "@u/route";

export default {
  components: {
    BModal,
    PushpinOutlined,
  },
  setup() {
    const editor = useEditor();
    editor.config.zIndex = 0;
    editor.config.height = 600;

    const [draft] = useLocalStorage("draft");

    onMounted(() => editor.txt.html(draft.value));

    editor.config.onchange = useDebouce((newHtml) => {
      draft.value = newHtml;
    }, 500);
    const modal = ref(null);
    const showModal = () => modal.value.setVisible(true);

    let submit = async (state) => {
      modal.value.okButtonProps.loading = true;
      try {
        const request = http.post("/articles", {
          ...state,
          content: editor.txt.html(),
        });
        await lazyRequest(request);
        useSuccessNotice({
          message: "发布成功",
        });
      } catch (error) {
        useErrorNotice({
          message: "发布失败",
          description: error.reason || "未知错误",
        });
      } finally {
        modal.value.setVisible(false);
        modal.value.okButtonProps.loading = false;
      }
    };

    const id = useRouteQuery("id");
    const updateFlag = Boolean(id);
    if (updateFlag) {
      onMounted(async () => {
        try {
          const { data } = await http.get(`/articles/${id}`);
          editor.txt.html(data.content);
          modal.value.formState.title = data.title;
          modal.value.formState.synopsis = data.synopsis;
          modal.value.formState.type = data.type;
        } catch (error) {
          useInfoNotice({
            message: "文章获取失败",
            description: error.data || error.reason || "未知错误",
          });
        }
      });
      submit = async (state) => {
        modal.value.okButtonProps.loading = true;
        try {
          const request = http.put(`/articles/${id}`, {
            ...state,
            content: editor.txt.html(),
          });
          await lazyRequest(request, 600);
          useSuccessNotice({
            message: "更新成功",
          });
        } catch (error) {
          useErrorNotice({
            message: "更新失败",
            description: error.reason || "未知错误",
          });
        } finally {
          modal.value.setVisible(false);
          modal.value.okButtonProps.loading = false;
        }
      };
    }

    const submitButtonMessage = updateFlag ? "更 新" : "发 布";

    return {
      modal,
      showModal,
      submit,
      submitButtonMessage,
    };
  },
};
</script>

<style scoped>
.editor {
  margin: 30px, 10px;
  background-color: #eceff1;
  padding: 10px;
  border-radius: 4px;
}
.actions {
  padding: 8px;
  text-align: center;
}
.actions > * {
  margin: 10px;
}
</style>